<script setup>
import { IconCartAdd } from '../icon/index.js'

// 需要设置 font-size, 否则使用继承的, 并且需要 绑定属性 product(必要结构如下代码)
// 可绑定的回调事件 goDetail(点击商品图片), addCart(点击购物车图标), 参数是其中接收到的 product
// <ProductBox :product="商品对象" @go-detail="回调事件1" @add-cart="回调事件2" />

const props = defineProps({
    product: {
        require: true,
        default: ()=>({title:'', image:'./product.jpg', price: 0})
    }
});
const emits = defineEmits(['goDetail', 'addCart']);
const product = props.product;
function goDetail(p) {
    emits('goDetail', p);
}
function addCart(p) {
    emits('addCart', p);
}
</script>
<template>
    <div class="product-box-dl" >
        <div class="image-dl" @click="goDetail(product)">
            <img :src="product.image" alt="no image">
        </div>
        <div class="product-title-dl">{{product.title}}</div>
        <div class="product-foot-dl">
            <div class="price-dl">￥{{product.price}}</div>
            <IconCartAdd class="icon-dl" @click.stop="addCart(product)" />
        </div>
    </div>
</template>
<style scoped>
.product-box-dl {
    width: 2em;
    margin-bottom: 0.1em;
}
.image-dl {
    width: 2em;
    height: 2em;
    background-color: #ccc;
    cursor: pointer;
    overflow: hidden;
}
.image-dl img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-size: 0.4em;
    display: block;
}

.product-title-dl {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0.1em 0;
    font-size: 0.28em;
}

.product-foot-dl {
    display: flex;
    justify-content: space-between;
}
.price-dl {
    color: #900;
    font-size: 0.24em;
}
.product-foot-dl .icon-dl {
    width: 0.32em;
    height: 0.32em;
    color: #f00;
    cursor: pointer;
}
</style>